<template>
  <tiny-nav-menu :data="menuData">
    <template #logo>
      <img src="../../public/icon.png" width="30" height="30" alt="Logo">
    </template>
    <template #toolbar>
      <div class="right">
        <tiny-autocomplete
            v-if="existFlag"
            clearable
            v-model="searchBlog"
            label="autocompleteLabel"
            placeholder="搜博客"
            :prefix-icon="IconSearch()"
            :fetch-suggestions="querySearch"
            value-key="title"
            style="width:500px;margin-right:30px;"
        >
          <template #default="{ slotScope }">
            <div>{{ slotScope.title }}</div>
          </template>
          <template #append>
            <span style="color:#fff;cursor:pointer;" @click="handleSearch">搜索</span>
          </template>
        </tiny-autocomplete>
        <!-- 头像 -->
        <tiny-popover
            placement="bottom"
            width="200"
            trigger="hover"
            append-to-body
            :visible-arrow="false"
            v-if="user"
        >
          <div class="container">
            <div class="header">
              <div class="base-info">
                <div class="number"><b>{{baseInfo.fanNum}}</b></div>
                <span>粉丝</span>
              </div>
              <div class="base-info">
                <div class="number"><b>{{baseInfo.articleNum}}</b></div>
                <span>文章</span>
              </div>
              <div class="base-info">
                <div class="number"><b>{{baseInfo.postNum}}</b></div>
                <span>帖子</span>
              </div>
            </div>
            <div class="main">
              <div class="main-item" @click="toUserDetail">
                <icon-user theme="outline" size="15" fill="#333"/>
                <span class="item-desc">个人资料</span>
              </div>
              <div class="main-item" @click="toContentManage">
                <notes theme="outline" size="15" fill="#333"/>
                <span class="item-desc">内容管理</span>
              </div>
              <div class="main-item" @click="handleLogout">
                <logout theme="outline" size="15" fill="#333"/>
                <span class="item-desc">安全退出</span>
              </div>
            </div>
            <div class="logout"></div>
          </div>
          <template #reference>
            <img :src="user.avatar" width="45" height="45" style="border-radius: 100px" alt="avatar">
          </template>
        </tiny-popover>
        <span v-else class="login-signup" style="color:#fff" @click="$router.push('/login')">登录/注册</span>
        <span class="history" style="color:#fff" @click="toHistory">足迹</span>
        <tiny-popover
            placement="top-start"
            width="130"
            trigger="hover"
            append-to-body
            :visible-arrow="false"
        >
          <div class="publish-tag">
            <span @click="$router.push('/publish/0')">
              <notes theme="outline" size="24" fill="#333" :strokeWidth="2"/>
              发文章
            </span>
            <span @click="$router.push('/publish/1')">
              <file-code theme="outline" size="24" fill="#333" :strokeWidth="2"/>
              发帖子
            </span>
          </div>
          <template #reference>
            <button class="publish" @click="$router.push('/publish')">发布</button>
          </template>
        </tiny-popover>
      </div>
    </template>
  </tiny-nav-menu>
</template>

<script setup>
import {
  NavMenu as TinyNavMenu, Popover as TinyPopover, Button as TinyButton, ActionMenu as TinyActionMenu,
  Autocomplete as TinyAutocomplete, Modal
} from '@opentiny/vue'
import {User as IconUser, Notes, Lock, Logout, FileCode} from '@icon-park/vue-next'
import {IconSearch} from '@opentiny/vue-icon'
import {ref} from "vue";
import {useHeaderSearchStore} from "../store/useHeaderSearchStore.js";
import {storeToRefs} from 'pinia'
import {userName,tokenName} from "../config/index.js";
import request from "../utils/request.js";
import {useRouter} from "vue-router";


const router = useRouter()
const store = useHeaderSearchStore()
const {existFlag} = storeToRefs(store)
const menuData = ref([
  {
    title: '首页',
    url: '/'
  },
  {
    title: '博客',
    url: '#/blog'
  },
  {
    title: '贴吧',
    url: '#/post'
  },
  {
    title: '资源',
    url: '#/resource'
  }
])
const searchBlog = ref('')
const suggestions = ref([])
const timeout = ref(null)
const user = ref(localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)) : null)
const baseInfo = ref({})
const querySuggestion = ref({
  title:'',
  pageParam:{
    pageNum:1,
    pageSize:10
  },
  type:0
})



// 跳转足迹页
const toHistory = () => {
  if (user.value){
    router.push(`/history/${user.value.id}`)
  }else {
    router.push('/login')
  }
}

// 跳转用户详细页面
const toUserDetail = () => {
  router.push(`/user/detail/${user.value.id}`)
}

// 跳转内容管理页
const toContentManage = () => {
  router.push(`/content/manage/${user.value.id}`)
}

// 搜索  跳转blog-search
const handleSearch = () => {
  const {href} = router.resolve(`/blog-search?title=${searchBlog.value}`)
  window.open(href,'_blank')
}

// 查询建议列表
const querySearch = (queryString, cb) => {
  // 根据queryString发请求查询建议列表
  querySuggestion.value.title = queryString
  request.post('/api/contents/articles/page',querySuggestion.value).then(res => {
    if (res.code === 1){
      suggestions.value = res.data.records
      // 调用 callback 返回建议列表的数据
      clearTimeout(timeout.value)
      timeout.value = setTimeout(() => {
        cb(suggestions.value)
      }, 100)
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}

// 查询用户信息
const queryUserInfo = () => {
  if (user.value){
    request.get(`/api/users/${user.value.id}`).then(res => {
      if (res.code === 1){
        baseInfo.value = res.data
      }else {
        Modal.message({message:res.message,status:'error'})
      }
    })
  }
}
queryUserInfo()

// 安全退出
const handleLogout = () => {
  request.get('/api/users/logout').then(res => {
    if (res.code === 1){
      // 清除缓存
      localStorage.removeItem(userName)
      localStorage.removeItem(tokenName)
      // 跳转到登录页
      router.push('/login')
    }else {
      Modal.message({message:res.message,status:'error'})
    }
  })
}


</script>

<style lang="less" scoped>
@header-right-height: 48px;
@header-right-display: block;
@header-right-margin-left: 20px;
@header-right-cursor: pointer;
@header-right-padding: 0 12px;

.publish-tag {
  span{
    cursor:pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.publish {
  .publish:active {
    -webkit-box-shadow: 1px 1px 13px #20232e,
      -1px -1px 33px #545b78;
    box-shadow: 1px 1px 13px #20232e,
      -1px -1px 33px #545b78;
    color: #d6d6d6;
    -webkit-transition: 100ms;
    transition: 100ms;
  }

  .publish:hover {
    -webkit-box-shadow: 1px 1px 13px #20232e,
      -1px -1px 13px #545b78;
    box-shadow: 1px 1px 13px #20232e,
      -1px -1px 13px #545b78;
    color: #d6d6d6;
    -webkit-transition: 500ms;
    transition: 500ms;
  }

  height: 35px;
  margin: 5px 5px 5px 20px;
  width: 80px;
  background: #333;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Consolas, Courier New, monospace;
  border: solid #404C5D 1px;
  font-size: 16px;
  color: rgb(161, 161, 161);
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 15px #41465B,
  5px 5px 15px #41465B,
  inset 5px 5px 10px #212121,
    inset     -5px -5px 10px #212121;
  box-shadow: -1px -5px 15px #41465B,
  5px 5px 15px #41465B,
  inset 5px 5px 10px #212121,
    inset     -5px -5px 10px #212121;
}

.right {
  .login-signup:hover {
    background-color: #474c5e;
  }

  .login-signup {
    display: @header-right-display;
    width: 71px;
    height: @header-right-height;
    margin-left: @header-right-margin-left;
    cursor: @header-right-cursor;
    line-height: @header-right-height;
    padding: @header-right-padding;
  }

  .history:hover {
    background-color: #474c5e;
  }

  .history {
    display: @header-right-display;
    width: 32px;
    height: @header-right-height;
    margin-left: @header-right-margin-left;
    cursor: @header-right-cursor;
    line-height: @header-right-height;
    padding: @header-right-padding;
  }

  display: flex;
  align-items: center;
}

.main-item:hover {
  background-color: #f0f0f5;
}

.container {
  .main {
    .main-item {
      .item-desc {
        margin-left: 8px;
      }

      width: 95%;
      padding: 4px;
      cursor: pointer;
    }

    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .header {
    .base-info {
      .number {
        font-size: 18px;
      }

      cursor: pointer;
    }

    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }

  width: 100%;
}

.preview {
  min-height: 450px;
}

.preview .tiny-nav-menu a:hover {
  text-decoration: none;
}
</style>
